<template>
  <div class="home_card">
    <div class="rowTitle">
      <!-- <span>转账核实身份</span> -->
      <span>{{ $t("Home.index21") }}</span>
      <date-range-picker
        @change="getData"
        v-model="query_time"
        class="date-item"
      />
    </div>
    <ul
      class="cardContent"
      @click="toRoute(checkPermission(['payment@index']))"
    >
      <li>
        <div>
          <!-- <span class="Ztitle">转账核实总人数</span> -->
          <span class="Ztitle">{{ $t("Home.index22") }}</span>
          <!-- <span>较上月</span> -->
          <!-- <span>{{ $t("Home.index4") }}</span> -->
        </div>
        <div>
          <div>
            <h2 class="DINfont">{{ paymentData.accounts }}</h2>
            {{ $t("Home.index14") }}
          </div>
          <!-- <span :class="getClass(paymentData.history_diff_last_month_accounts)">
            <img
              :src="getImg(paymentData.history_diff_last_month_accounts)"
              alt=""
            />
            <span>{{
              Math.abs(paymentData.history_diff_last_month_accounts)
            }}</span>
          </span> -->
        </div>
      </li>
      <li>
        <div>
          <!-- <span class="Ztitle">今日转账核实人数</span>
          <span>较昨日</span> -->
          <span class="Ztitle">{{ $t("Home.index23") }}</span>
          <!-- <span>{{ $t("Home.index7") }}</span> -->
        </div>
        <div>
          <div>
            <h2 class="DINfont">{{ paymentData.today_accounts }}</h2>
            {{ $t("Home.index14") }}
          </div>
          <!-- <span :class="getClass(paymentData.today_diff_yester_day_accounts)">
            <img
              :src="getImg(paymentData.today_diff_yester_day_accounts)"
              alt=""
            />
            <span>{{
              Math.abs(paymentData.today_diff_yester_day_accounts)
            }}</span>
          </span> -->
        </div>
      </li>
      <li>
        <div>
          <!-- <span class="Ztitle">入金总金额</span>
          <span>较上月</span> -->
          <span class="Ztitle">{{ $t("Home.index24") }}</span>
          <!-- <span>{{ $t("Home.index4") }}</span> -->
        </div>
        <div>
          <div>
            <h2 class="DINfont">{{ paymentData.charge_amount }}</h2>
            HKD
          </div>
          <!-- <span
            :class="getClass(paymentData.history_diff_last_month_charge_amount)"
          >
            <img
              :src="getImg(paymentData.history_diff_last_month_charge_amount)"
              alt=""
            />
            <span>{{
              Math.abs(paymentData.history_diff_last_month_charge_amount)
            }}</span>
          </span> -->
        </div>
      </li>
      <li>
        <div>
          <!-- <span class="Ztitle">今日入金金额</span>
          <span>较昨日</span> -->
          <span class="Ztitle">{{ $t("Home.index25") }}</span>
          <!-- <span>{{ $t("Home.index7") }}</span> -->
        </div>
        <div>
          <div>
            <h2 class="DINfont">{{ paymentData.today_charge_amount }}</h2>
            HKD
          </div>
          <!-- <span
            :class="getClass(paymentData.today_diff_yester_day_charge_amount)"
          >
            <img
              :src="getImg(paymentData.today_diff_yester_day_charge_amount)"
              alt=""
            />
            <span>{{
              Math.abs(paymentData.today_diff_yester_day_charge_amount)
            }}</span>
          </span> -->
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import { getPaymentCount } from "@/api/home";
import DateRangePicker from "@/components/DateRangePicker/index_shouye";
export default {
  components: {
    DateRangePicker,
  },
  data() {
    return {
      query_time: [],
      paymentData: {},
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    toRoute(disabled) {
      if (!disabled) {
        return false;
      }
      this.$router.push({
        // name: "入金审核",
        path: "/openList/cashCheck",
      });
    },
    getData() {
      getPaymentCount({
        start_time:
          this.query_time && this.query_time[0]
            ? parseInt(this.query_time[0] / 1000)
            : "",
        end_time:
          this.query_time && this.query_time[1]
            ? parseInt(this.query_time[1] / 1000)
            : "",
      })
        .then((res) => {
          if (res.code == 10000) {
            this.paymentData = res.data;
          } else {
            this.$message.error(res.message);
          }
        })
        .catch((error) => {
          this.$message.error(error.Error);
        });
    },
    getClass(val) {
      if (val >= 0) {
        return "redText";
      } else {
        return "greenText";
      }
    },
    getImg(val) {
      if (val >= 0) {
        return require("@/assets/images/img16.png");
      } else {
        return require("@/assets/images/img17.png");
      }
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.cardContent {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  font-size: 14px;
  li {
    width: 36%;
    margin: 17px 4%;
    font-size: 14px;
    color: #999999;
    list-style: none;
    > div {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 12px 0;
      .Ztitle,
      .DINfont {
        color: #333333;
      }
      h2 {
        display: inline-block;
      }
      img {
        max-width: 15px;
        vertical-align: middle;
      }
    }
  }
}
</style>
